<!--
 @Description 创新工作室列表
 @date 2023/1/10
-->

<template>
  <div
    v-if="list.length >0"
    class="innovation-studio-list-page"
    :style="{
      marginTop: top,
      padding: '0 ' + spacing+' '+paddingBottom
    }"
  >
    <cell-title
      v-if="isShowModuleName"
      :title="moduleName"
      :hide-desc="true"
      :option="option"
      :style="{
        'background-color': option.backgroundColor,
        'border-radius':
          radiusSize + ' ' + radiusSize + ' 0 0',
      }"
    />
    <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        :finished-text="finishedText"
        @load="onLoad"
      >
        <div
          class="list-content"
        >
          <div v-for="(item, i) in list" :key="i" class="list-item">
            <div class="main-item" @click="goNewsDetail(item)">
              <div class="innov-img">
                <div class="dw-img">
                  <!-- <img
                    class="simg"
                    :src="setImgPath(item.coverImgId, item.coverImgIdUrl)"
                    alt=""
                  > -->
                  <van-image
                    :src="setImgPath(item.coverImgId, item.coverImgIdUrl)"
                    :fit="imgType"
                  >
                    <template v-slot:loading>
                      <van-loading type="spinner" size="20" />
                    </template>
                    <template v-slot:error>
                      <img src="../../images/base/error-icon.png" alt>
                    </template>
                  </van-image>
                </div>
              </div>
              <div class="innov-main">
                <div class="line-one ellipsis">{{ item.mainTitle || '' }}</div>
                <div class="line-two ellipsis">
                  {{ item.param2 || '' }}
                </div>
                <div class="line-three ellipsis">
                  成立时间：{{ item.publishTime || '' }}
                </div>
                <div
                  class="to-detail"
                />
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import mixins from './../mixins'
import CellTitle from '@/components/CustomPage/apps/widget/characters/cellTitle'
export default {
  name: 'InnovationStudioList',
  components: { CellTitle },
  inject: ['footerHeight'],
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default() {
        return {}
      }
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isLoading: false, // 下拉加载
      loading: false, // 上拉刷新
      finishedText: '',
      finished: true,
      page: 1,
      list: [],
      isNoData: false,
      defaultList: [
        {
          id: '163859f9-f90b-4499-a0c5-955831f77f35',
          businessType: 'cxgzs',
          belongDeptid: '7113d42a5bcd47fea00ea52dc883514b',
          mainTitle: '创新工作室',
          briefIntroduction: '简介',
          coverImgId: '',
          coverImgIdUrl: '',
          publisher: '姓名',
          publishTime: '2015-06-01',
          isTop: '1',
          status: 'GIPSTSTUS01',
          pageview: 130,
          pageviewUtime: '2022-11-26 10:18:02',
          evaluateState: 0,
          evaluateNumber: 0,
          evaluateScore: 0,
          evaluateUtime: '2022-11-26 10:18:02',
          favorState: 0,
          favorNumber: 0,
          treadNumber: 0,
          replaceTime: '2022-11-26 10:18:02',
          shareNumber: 0,
          shareTime: '2022-11-26 10:18:02',
          commentState: 2,
          bid: '2e87a99e-bf00-4418-95c3-87ab99e8173d'
        },
        {
          id: '4748ec98-f572-4bf7-8021-d7e8b57abce8',
          businessType: 'cxgzs',
          belongDeptid: '86ae4383306b4a2681192eef787c7e80',
          mainTitle: '创新工作室',
          briefIntroduction: '简介',
          coverImgId: '',
          coverImgIdUrl: '',
          publisher: '姓名',
          publishTime: '2020-01-15',
          isTop: '2',
          status: 'GIPSTSTUS01',
          pageview: 229,
          pageviewUtime: '2022-11-21 09:07:30',
          evaluateState: 0,
          evaluateNumber: 0,
          evaluateScore: 0,
          evaluateUtime: '2022-11-21 09:07:30',
          favorState: 0,
          favorNumber: 0,
          treadNumber: 0,
          replaceTime: '2022-11-21 09:07:30',
          shareNumber: 0,
          shareTime: '2022-11-21 09:07:30',
          commentState: 2,
          bid: '2e87a99e-bf00-4418-95c3-87ab99e8173d'
        },
        {
          id: '5ccf43d2-4c98-456d-bc01-efc9edf9fa4b',
          businessType: 'cxgzs',
          belongDeptid: 'b9f310b2a9664a6cbc24aae72886a4b7',
          mainTitle: '创新工作室',
          briefIntroduction: '简介',
          coverImgId: '',
          coverImgIdUrl: '',
          publisher: '姓名',
          publishTime: '2018-06-01',
          isTop: '2',
          status: 'GIPSTSTUS01',
          pageview: 108,
          pageviewUtime: '2022-11-19 08:58:28',
          evaluateState: 0,
          evaluateNumber: 0,
          evaluateScore: 0,
          evaluateUtime: '2022-11-19 08:58:28',
          favorState: 0,
          favorNumber: 0,
          treadNumber: 0,
          replaceTime: '2022-11-19 08:58:28',
          shareNumber: 0,
          shareTime: '2022-11-19 08:58:28',
          commentState: 2,
          bid: '2e87a99e-bf00-4418-95c3-87ab99e8173d'
        }
      ]
    }
  },
  computed: {
  },
  async created() {
    if (this.isInitData) {
      await this.initData()
    } else {
      this.list = this.defaultList
    }
  },
  methods: {
    setData(result) {
      this.finished = false
      const { dataList } = result
      const res = dataList
      const { rows, total } = res.data || {}
      this.list.push(...rows)
      this.isNoData = total < 1
      if (this.isNoData) {
        this.finishedText = ''
      } else {
        this.finishedText = '已经到底了'
      }
      if (this.list.length >= total) {
        this.finished = true
      } else {
        this.finished = false
      }
    },
    refresh4other() {
      return new Promise((resolve) => {
        this.finished = true
        this.page = 1
        this.list = []
        resolve()
      })
    },
    onRefresh() {
      this.finished = false
      this.page = 1
      this.list = []
      this.getDataByCode('dataList')
    },

    /**
     * 上拉加载
     */
    onLoad() {
      if (!this.isLoading) {
        this.page += 1
        this.getDataByCode('dataList')
      } else {
        this.loading = false
      }
    },
    goNewsDetail(item) {
      //   this.$router.push({
      //     path: '/innovationStudioDetail',
      //     name: 'InnovationStudioDetail',
      //     query: { i: item.id }
      //   })
    }
  }
}
</script>

<style type="text/scss" lang="scss">
@import '@/styles/var.scss';
@import '@/styles/utility/rem.scss';

.innovation-studio-list-page {
  position: relative;

  .van-pull-refresh {
    padding: 0;

    .list-content {
      padding: 0 rem(10) 0 0;

      .list-item {
        margin-top: rem(20);
        height: rem(230);
        padding-top: rem(30);

        .main-item {
          height: rem(200);
          background: #fff;
          border-radius: rem(16);
          display: flex;
          position: relative;

          .innov-img {
            height: rem(200);
            width: rem(184);

            .dw-img {
              width: 100%;
              height: 100%;
              position: relative;

              > .van-image {
                display: inline-block;
                position: absolute;
                top: rem(-30);
                width: 100%;
                height: rem(200);
                border-radius: rem(12);

                img {
                  width: 100%;
                  height: 100%;
                  border-radius: rem(12);
                }

                .van-image__error {
                  border-radius: rem(12);
                  > img {
                    width: rem(120);
                    height: rem(120);
                    border-radius: 0;
                  }
                }
              }

              //   .simg {
              //     display: inline-block;
              //     position: absolute;
              //     top: rem(-30);
              //     width: 100%;
              //     height: rem(200);
              //     border-radius: rem(12);
              //   }
            }
          }

          .innov-main {
            margin-left: rem(20);
            flex: 1;
            width: 0;
            position: relative;

            .ellipsis {
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              word-break: break-all;
            }

            .line-one {
              margin-top: rem(30);
              font-size: rem(30);
              font-family: PingFang SC Medium, PingFang SC Medium-Medium;
              font-weight: 500;
              text-align: left;
              color: #333333;
            }

            .line-two {
              margin-top: rem(20);
              opacity: 1;
              font-size: rem(24);
              font-family: PingFang SC Regular, PingFang SC Regular-Regular;
              font-weight: 400;
              text-align: left;
              color: #666666;
            }

            .line-three {
              margin-top: rem(20);
              font-size: rem(24);
              font-family: PingFang SC Regular, PingFang SC Regular-Regular;
              font-weight: 400;
              text-align: left;
              color: #999999;
            }

            .to-detail {
              position: absolute;
              height: rem(48);
              width: rem(48);
              right: rem(-10);
              top: rem(76);
             @include bg-color($mainColor);
              border-radius: rem(12);
              background-image: url('./images/to-detail.png');
              background-size: 100% 100%;
              background-repeat: no-repeat;
              //   @include bg-image('.', '/toDetail.png');
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }
    }
  }
}
</style>
